<template>
    <div ref="echart"></div>
</template>
<script>
    import * as echarts from "echarts";
    export default {
        // 抽出公共属性
        props: {
            chartData: {
                type: Object,
                default() {
                    return {
                        xData: [],
                        series: [],
                    }
                }
            },
            // 是否有 x 轴
            isAxisChart: {
                type: Boolean,
                default: true,
            }
        },
        watch: {
            chartData: {
                handler: function () {
                    // 处理数据
                    this.initChart();
                },
                deep: true,
            }
        },
        computed:{
            options(){
                return this.isAxisChart?this.axiosOption:this.normalOption;
            }
        },
        methods: {
            initChart() {
                this.initChartData();
                // 设置 echart 表格
                if (!this.echart) {
                    this.echart=echarts.init(this.$refs.echart);
                }
                this.echart.setOption(this.options);
            },
            initChartData() {
                if (this.isAxisChart) {
                    this.axiosOption.xAxis.data = this.chartData.xData;
                    this.axiosOption.series = this.chartData.series;
                } else {
                    this.normalOption.series = this.chartData.series;
                }
            }
        },
        data() {
            return {
                // 根据有无 x 轴区分
                axiosOption: {
                    legend: {
                        // 图例文字颜色
                        textStyle: {
                            color: "#333",
                        },
                    },
                    grid: {
                        left: "20%",
                    },
                    // 提示框
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category", // 类目轴
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            color: "#333",
                        },
                    },
                    yAxis: [
                        {
                            type: "value",
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3",
                                },
                            },
                        },
                    ],
                    color: [
                        "#2ec7c9",
                        "#b6a2de",
                        "#5ab1ef",
                        "#ffb980",
                        "#d87a80",
                        "#8d98b3",
                    ],
                    series: [],
                },
                normalOption: {
                    tooltip: {
                        trigger: "item",
                    },
                    color: [
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series: [],
                },
                echart: null
            }
        }
    }
</script>